<template>
  <div class="header">
    <header class="container">
      <div class="logo">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-sousuo1"></use>
        </svg>
        <h2>小白菌搜索</h2>
      </div>
      <span class="button sm">登录</span>
    </header>
  </div>
</template>

<script setup></script>

<style lang="scss" scoped>
.header {
  height: 4rem;
  background-color: #fff;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
    margin-bottom: 2px;
  display: flex;
  justify-content: center;
  header.container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    div.logo {
      display: flex;
      align-items: center;
      gap: 10px;
      .icon {
        width: 2rem;
        height: 2rem;
      }
      h2 {
        font-weight: 400;
      }
    }
  }
}
</style>
